<template>
  <view class="p-[40rpx] box-border">
    <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold text-center">确认个人信息</text>
    <!-- <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block text-center">请填写真实信息完成电子健康卡注册</text> -->

    <view class="mb-[50rpx]">
      <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">姓名</text>
      <input v-model="formData.name" type="text"
        class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
        placeholder="请输入您的真实姓名" />
    </view>

    <view class="mb-[50rpx]">
      <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">身份证号码</text>
      <input v-model="formData.idcard" type="text"
        class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
        placeholder="请输入您的身份证号码" />
    </view>

    <view class="mb-[50rpx]">
      <text class="block mb-[16rpx] font-bold text-[#555] text-[32rpx]">手机号码</text>
      <input v-model="formData.phone" type="tel"
        class="w-full box-border px-[30rpx] py-[30rpx] border-2 border-[#ddd] rounded-[20rpx] text-[32rpx] bg-[#f8f9fa]"
        placeholder="请输入您的手机号码" />
    </view>

    <view
      class="bg-[#e8f5e9] border-l-4 border-[#4caf50] p-[30rpx] rounded-r-[16rpx] mb-[40rpx] text-[28rpx] text-[#2e7d32]">
      <!-- <IconFont name="shield-alt" class="mr-[10rpx]" /> -->
      <text>我们承诺保护您的个人信息安全，所有信息仅用于电子健康卡注册</text>
    </view>

    <nut-button type="primary" block size="large"
      class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]" @click="onSubmit">
      <template #icon>
        <IconFont name="edit" class="mr-[10rpx]" />
      </template>
      <text>提交注册</text>
    </nut-button>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, toRefs } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

const props = defineProps<{
  formData: {
    name: string
    idcard: string
    phone: string
  }
}>()
const emit = defineEmits(['update:formData', 'submit'])

const formData = ref({ ...props.formData })

watch(formData, (val) => {
  emit('update:formData', val)
}, { deep: true })

function onSubmit() {
  emit('submit', formData.value)
}
</script> 